<script setup>
import {onMounted, ref} from 'vue'
import {get,post} from '../util/request.js'
import {useRouter} from "vue-router";
import {useStore} from "../pinia/index.js";

const store=useStore();
const router=useRouter()

const money=ref(0);
const add=ref({
  payType:'2'
})
const back = () => {
  history.back();
}
onMounted(()=>{
  //请求接口  获取钱包余额
  get("userWallet/my").then(r=>{
    if(r.code==0){
      money.value=r.data.money;
    }else {

    }
  })
})
const addPay = () => {
  //请求接口 实现充值
  // add.value.uid=store.user.id;
  post("userWallet/create",add.value).then(r=>{
    if(r.code==0){
      document.write(r.data);
      // money.value+=add.value.money;
    }
  })
}
const tz = (type) => {
  //路由跳转 传值
  router.push({path:"/moneylog",query:{type:type}});
}
</script>

<template>
  <van-nav-bar
      title="我的钱包"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="back"
  />
  <div class="dv1">
    <van-row>
      <van-col span="24">
        爱贝余额（元）
      </van-col>
      <van-col span="24" style="margin-top: 10px;margin-bottom: 10px">
        {{money/100}} 元
      </van-col>
      <van-col span="24">
        <span @click="tz(2)">消费记录</span> | <span class="sp1" @click="tz(1)">充值记录</span>
      </van-col>
    </van-row>
  </div>
  <div style="margin-left: 5%;margin-top: 5%">
    <label style="border-left:3px solid grey;padding-left: 10px ">充值</label>
  </div>
  <div>
    <van-field style="padding: 20px" v-model="add.money" label-width="1" placeholder="请输入充值金额,单位元" />
  </div>
  <div>
    <van-radio-group v-model="add.payType">
      <van-cell-group inset>
        <van-cell title="支付宝支付" clickable @click="add.payType = '2'">
          <template #right-icon>
            <van-radio name="2" />
          </template>
        </van-cell>
        <van-cell title="微信支付" clickable @click="add.payType = '3'">
          <template #right-icon>
            <van-radio name="3" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
  </div>
  <div style="font-size: 12px;color: grey;margin-left: 5%;margin-top: 3%">
    <div>充值说明:</div>
    <div>本次充值仅限于本平台消费，不允许其他行为！</div>
  </div>
  <div style="margin-top: 20%">
    <van-button round type="success" block @click="addPay">充值</van-button>
  </div>
</template>

<style scoped>
.dv1{
  margin-top: 30px;
  margin-left: 3%;
  width: 84%;
  border-top-left-radius:20px;
  border-top-right-radius:20px ;
  background-color: #888888;
  color: white;
  padding: 20px;
}
.sp1{
  margin-left: 10px;
}
</style>
